<template>
  <div>
    <el-empty :image-size="200" v-show="isDisplay"></el-empty>
    <el-col v-for="(item, index) in spikeDetail" :key="index">
      <el-card style="margin: 5px" shadow="hover">
        <div slot="header" class="clearfix">
          <span>{{ item.goodsName }}</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="goodsDetail(item.id)"
          >
            商品详情
          </el-button>
        </div>
        <div class="text_item">
          <el-row>
            <el-col :span="24"
              ><div class="grid-content bg-purple">
                产品标题：{{ item.goodsTitle }}
              </div></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="12"
              ><div class="grid-content bg-purple">
                开始时间：{{timestampToTime(item.startDate)}}
              </div></el-col
            >
            <el-col :span="12"
              ><div class="grid-content bg-purple-light">
                结束时间：{{timestampToTime(item.endDate)}}</div
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                年利率：{{item.aagr}}%</div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-red">
                秒杀价：{{item.seckillPrice/10000}}万元</div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                库存量：{{item.stockCount}}</div
            ></el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
  </div>
</template>

<script>

export default {
  data() {
    return {
      isDisplay: true,
      spikeDetail: [],
      timeStamp: [],
    };
  },
  created() {
    this.getSpikeLists();
    // this.getTimeStamp();   //服务器时间
  },
  methods: {
    goodsDetail(list) {
      this.$router.push({
        path: "/spikeDetail",
        query: {
          col: list,
        },
      });
    },
    timestampToTime(time) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new Date(time);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let m = date.getMinutes();
      let s = date.getSeconds();
      MM = MM < 10 ? "0" + MM : MM;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;
      return y + "年" + MM + "月" + d + "日" + h + "时" + m + "分" + s + "秒";
    },
    getSpikeLists() {
      this.$http.get("/mall/seckillgoods/list?limit=0&to=10").then((resp) => {
        if (resp.code == 200) {
          this.spikeDetail = resp.data;
          this.isDisplay = false;
        }
      });
    },
    getTimeStamp() {
      this.$http.get("/mall/timestamp").then((res) => {
        this.timeStamp = res.data;
      });
    },
  },
};
</script>

<style>
.text_item {
  text-align: center;
  line-height: 36px;
  /*强制文字在一行文本框内*/
  white-space: nowrap;
  /*溢出部分文字隐藏*/
  overflow: hidden;
  /*溢出部分省略号处理*/
  text-overflow: ellipsis;
}
.el-row {
  margin-bottom: 15px;
}
.el-row:last-child {
  margin-bottom: 0px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.bg-red{
  background-color: rgb(245,108,108);
}
</style>